<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
		.box{
			width: 200px;
			height: 500px;
			margin: 30px auto;
			background-color: green;
		/* 	2.绑定动画 */
		     /* infinite  :无限*/
			animation: mv 3s linear infinite;
		}	
		 /* 1.创建关键帧 */
		 @keyframes mv {
			/* from */ 0%,20%{
				 background-color: aqua;  /* 动画开始的状态 */
				 width: 200px;
			 }
			/* to */ 30%, 50% {
				 background-color: blue;  /* 动画结束的状态 */
				 width: 800px;
			 }
			70%,90%
			 { /* 当前状态持续时间 */
			background-color: powderblue;  /* 动画结束的状态 */
			width: 1200px;	 
			 }
		 	
		 }
			
		</style>
	</head>
	<body>
	<div class="box"></div>	
	</body>
</html>
